<template>
  <el-date-picker
    v-bind="$attrs"
    v-model="value"
    :type="type"
    :range-separator="rangeSeparator"
    :start-placeholder="startPlaceholder"
    :end-placeholder="endPlaceholder"
    format="YYYY-MM-DD"
    value-format="YYYY-MM-DD"
    :picker-options="pickerOptions"
    :range-state="rangeState"
    @change="timeChange"
  />
</template>

<script>
export default {
  props: {
    modelValue: {
      type: Array,
      default: () => []
    },
    type: {
      type: String,
      default: 'daterange'
    },
    rangeSeparator: {
      type: String,
      default: '至'
    },
    startPlaceholder: {
      type: String,
      default: '开始日期'
    },
    endPlaceholder: {
      type: String,
      default: '结束日期'
    },
    format: {
      type: String,
      default: 'yyyy-MM-dd'
    },

    size: {
      type: String,
      default: 'default'
    },

    pickerOptions: {
      type: Object,
      default: () => ({})
    },
    rangeState: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ['update:modelValue'],
  data() {
    return {
      value: this.modelValue
    }
  },
  watch: {
    modelValue: {
      immediate: true,
      handler(newVal) {
        this.value = newVal
      }
    }
  },
  methods: {
    timeChange() {
      this.$emit('update:modelValue', this.value)
    }
  }
}
</script>
